<template>
  <div class="todoapp">
    <!-- 头 输入框 -->
    <TodoHeader :list="filterList" @addTodo="addTodo" />
    <!-- 主体 列表
      :list="list"
      把list的值传递给 子组件的 list prop
     -->
    <TodoMain :list="filterList" @removeTodo="removeTodo" />
    <!-- 底部 操纵的按钮 -->
    <TodoFooter
      :list="list"
      :state="state"
      @changeState="changeState"
      @clearFinished="clearFinished"
    />
  </div>
</template>

<script>
// 1. 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  name: 'App', // 省略name不写，插件中的组件名可能是一个默认值
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    let data
    try {
      // 读取缓存数据 并赋值
      data = JSON.parse(localStorage.getItem('todo'))
      // console.log('data:', data)
      // 如果data为null 说明是第一次打开 还没有数据
      // 可以设置  默认值，或者  空数组
    } catch (error) {
      console.log('try里面错了')
      console.log('error:', error)
      // 给 data设置一个 空
      data = null
    }

    return {
      // 表达式1||表达式2  表达式1为假，解析表达式2
      // data为null 设置默认值
      list: data || [
        { id: 100, name: '😭', isDone: true },
        { id: 201, name: '🥦', isDone: false },
        { id: 103, name: '😄', isDone: true }
      ],
      // 筛选的状态
      state: 'all' // all 全部/finished 已完成/unfinished 未完成
    }
  },
  methods: {
    //  newTodo 形参 可以改名字 有意义即可
    addTodo (newTodo) {
      // console.log('newTodo:', newTodo)
      // 末尾添加 push 末尾删除pop
      // 开头添加 unshift 开头删除shift
      // this.list.push({
      this.list.unshift({
        id: Date.now(),
        name: newTodo,
        isDone: false
      })
    },
    // 接收id并删除数据
    removeTodo (id) {
      // console.log('id:', id)
      // 根据id 删除数据
      // 只保留 和 传递过来id不相同的元素
      // 可读性不高
      this.list = this.list.filter(v => v.id !== id)

      // filter 完整写法 可读性较高
      // const newList = this.list.filter(v => {
      //   if (v.id === id) {
      //     // 和要删除的id相同的元素
      //     // 舍弃
      //     return false
      //   } else {
      //     // 和传递过来的id不相同 保留
      //     return true
      //   }
      // })
      // // 新数组赋值给list
      // this.list = newList
    },
    // 修改状态
    changeState (state) {
      // console.log('state:', state)
      this.state = state
    },
    // 清除已完成
    clearFinished () {
      // console.log('clearFinished')
      // 删除已完成的
      // isDone false 保留
      // isDone true 删除
      this.list = this.list.filter(v => v.isDone === false)

      // 完整写法
      // this.list = this.list.filter(v => {
      //   if (v.isDone === false) {
      //     // 保留
      //     return true
      //   } else {
      //     return false
      //   }
      // })
    }
  },
  // 计算属性
  computed: {
    // 基于state筛选出来的新数组
    filterList () {
      switch (this.state) {
        case 'all':
          // 返回所有
          return this.list
        case 'finished': // isDone true
          // 筛选出 isDone为true
          return this.list.filter(v => {
            if (v.isDone === true) {
              return true
            } else {
              return false
            }
          })
        case 'unfinished': // isDone true
          // 筛选出 isDone为true
          return this.list.filter(v => {
            if (v.isDone === false) {
              return true
            } else {
              return false
            }
          })
      }
    }
  },
  // 侦听器
  watch: {
    list: {
      // 数据改变执行的逻辑
      handler () {
        console.log('list改变啦！！！')
        // 写入缓存 数组转为JSON
        localStorage.setItem('todo', JSON.stringify(this.list))
      },
      deep: true // 深度侦听，内部的属性改变也会触发
      // immediate: true //false /false // 是否默认执行一次
    }
  }
}
</script>

<style></style>
